<template>
  <div>
    <div>
      <span>车辆信息</span>
      <FormPanel ref="formPanel_vehicle" :list="formList_vehicle" :cols="3" :labelWidth="100" :formType="type" :isSubmitBtn="false" />
      <span>报警信息</span>
      <FormPanel ref="formPanel_alarm" :list="formList_alarm" :cols="3" :labelWidth="100" :formType="type" :isSubmitBtn="false" />
      <span>车主信息</span>
      <FormPanel ref="formPanel_owner" :list="formList_owner" :cols="3" :labelWidth="100" :formType="type" :isSubmitBtn="false" />
      <span>救援信息</span>
      <FormPanel ref="formPanel_rescue" :list="formList_rescue" :cols="3" :labelWidth="100" :formType="type" :isSubmitBtn="false" />
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'right'
        }"
      >
        <el-button @click="closeDrawer">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
export default {
  mixins: [dictionary],
  props: {
    details: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      formList_vehicle: this.createFormList(),
      formList_alarm: this.createFormList2(),
      formList_owner: this.createFormList3(),
      formList_rescue: this.createFormList4(),
      type: null
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '车型',
          fieldName: 'MODEL',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '底盘号',
          fieldName: 'VIN',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车辆六位代码',
          fieldName: 'CAR_CODE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车辆备案型号',
          fieldName: 'CAR_MODEL',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '销售省份/城市',
          fieldName: 'CAR_AREA',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '购车经销商',
          fieldName: 'DEALER_NAME',
          disabled: true
        },
        {
          type: 'DATE',
          label: '购车时间',
          fieldName: 'CAR_BUY_DATE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '行驶里程',
          fieldName: 'CAR_MILEAGE',
          disabled: true
        }
      ];
    },
    createFormList2() {
      return [
        {
          type: 'INPUT',
          label: '报警类型',
          fieldName: 'ALERT_TYPE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '报警级别',
          fieldName: 'ALERT_LEVEL',
          disabled: true
        },
        {
          type: 'DATE_TIME',
          label: '报警时间',
          fieldName: 'ALERT_TTME',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '报警编号',
          fieldName: 'ALERT_CODE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '报警处理单号',
          fieldName: 'RTM_TRAFFIC_CODE',
          disabled: true
        }
      ];
    },
    createFormList3() {
      return [
        {
          type: 'INPUT',
          label: '用户姓名',
          fieldName: 'CUSTOMER_NAME',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '用户联系方式',
          fieldName: 'CUSTOMER_PHONE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '紧急联系方式',
          fieldName: 'EMERGENCY_CONTACT',
          disabled: true
        }
      ];
    },
    createFormList4() {
      return [
        {
          type: 'CHECKBOX',
          label: '是否道路救援',
          fieldName: 'IS_RESCUE',
          style: { minWidth: '50px' },
          options: {
            trueValue: 10041001,
            falseValue: 10041002
          },
          disabled: true
        },
        {
          type: 'INPUT',
          label: '救援位置-经纬度',
          fieldName: 'RESCUE_POSITION',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '救援位置',
          fieldName: 'RESCUE_ADDRESS',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '救援距离',
          fieldName: 'RESUCE_DISTANCE',
          disabled: true
        }
      ];
    },
    async getData() {
      this.formList_vehicle.find(x => x.fieldName === 'MODEL').initialValue = this.details.MODEL;
      this.formList_vehicle.find(x => x.fieldName === 'VIN').initialValue = this.details.VIN;
      this.formList_vehicle.find(x => x.fieldName === 'CAR_CODE').initialValue = this.details.CAR_CODE;
      this.formList_vehicle.find(x => x.fieldName === 'CAR_MODEL').initialValue = this.details.CAR_MODEL;
      this.formList_vehicle.find(x => x.fieldName === 'CAR_AREA').initialValue = this.details.CAR_AREA;
      this.formList_vehicle.find(x => x.fieldName === 'DEALER_NAME').initialValue = this.details.DEALER_NAME;
      this.formList_vehicle.find(x => x.fieldName === 'CAR_BUY_DATE').initialValue = this.details.CAR_BUY_DATE;
      this.formList_vehicle.find(x => x.fieldName === 'CAR_MILEAGE').initialValue = this.details.CAR_MILEAGE;
      this.formList_alarm.find(x => x.fieldName === 'ALERT_TYPE').initialValue = this.details.ALERT_TYPE;
      this.formList_alarm.find(x => x.fieldName === 'ALERT_LEVEL').initialValue = this.details.ALERT_LEVEL;
      this.formList_alarm.find(x => x.fieldName === 'ALERT_TTME').initialValue = this.details.ALERT_TTME;
      this.formList_alarm.find(x => x.fieldName === 'ALERT_CODE').initialValue = this.details.ALERT_CODE;
      this.formList_alarm.find(x => x.fieldName === 'RTM_TRAFFIC_CODE').initialValue = this.details.RTM_TRAFFIC_CODE;
      this.formList_owner.find(x => x.fieldName === 'CUSTOMER_NAME').initialValue = this.details.CUSTOMER_NAME;
      this.formList_owner.find(x => x.fieldName === 'CUSTOMER_PHONE').initialValue = this.details.CUSTOMER_PHONE;
      this.formList_owner.find(x => x.fieldName === 'EMERGENCY_CONTACT').initialValue = this.details.EMERGENCY_CONTACT;
      this.formList_rescue.find(x => x.fieldName === 'IS_RESCUE').initialValue = this.details.IS_RESCUE;
      this.formList_rescue.find(x => x.fieldName === 'RESCUE_POSITION').initialValue = this.details.RESCUE_POSITION;
      this.formList_rescue.find(x => x.fieldName === 'RESCUE_ADDRESS').initialValue = this.details.RESCUE_ADDRESS;
      this.formList_rescue.find(x => x.fieldName === 'RESUCE_DISTANCE').initialValue = this.details.RESUCE_DISTANCE;
    },
    closeDrawer(param) {
      this.$emit('close', false, param);
    }
  }
};
</script>
